<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
				*{
			padding: 0;
			margin: 0 auto;
			box-sizing: border-box;
			}
			#container
			{
				width: 1200px;
				height: auto;
				
			}
			#header
			{
				float: left;
				width: 100%;
			}
			#context
			{
				float: left;
				width: 100%;
				padding-left: 60px;
				padding-right: 60px;
			}
			#logo
			{
				float: left;
				margin-top: 10px;
   				margin-left:70px;
			}
			#tab
			{
				margin-top: 40px;
				padding-left: 10px;
				margin-left: 10px;
				float: left;
			    color:#FFFFFF;
			    font-size: 18px;
			}
			#tab div {
		    position: relative;
		    width: 70px;
		    height: 30px;
		    border: 1px solid #cccccc;
		    text-align: center;
		    border-radius: 8%;
		    float: left;
		    margin-left: 10px;
		    background: aliceblue;
		 border-bottom: 0px;
			}	
			#tab div  a{
			    position: absolute;
			    margin-top: 3px;
			    color: darkgreen;
			    right: 18px;
			    font-weight: bold;
			     color: #006400;
			}
			#operator
			{
				float: right;
				font-size: 15px;
				color: #495FAE;
				margin-top: 5px;
				margin-right: 70px;
			}
			#mune
			{
				float: left;
				width: 100%;
				color:#FFFFFF;
				background:#EE7700 ;
			}
			#mune a{
				margin-left: 15px;
				font-size: 15px
			}
			#mune2
			{
				float: left;
				width: 100%;
				color:#000000;
				background:#D8D2CB ;
			}
			#con1{
				background: #F7F4EB;
				padding: 10px;
				color: #8B715B;
				border: 1px #B55620 solid;border-left: 0px;border-right: 0px;border-bottom: 0px;
				border-bottom: #D4CEB9 1px solid;
			}
			#con2{
				float: left;
				width: 100%;
				border: 1px #B55620 solid;border-left: 0px;border-right: 0px;border-top: 0px;
			}
			#con3{
				float:right;
				width: 100%;
				background:url(img/bg.png)0px -210px;width: 150px;height: 40px;
				
			}
			#con4{
				width: 100%;
				float: left;
			}
			#name{
				width: 60%;
				float: left;
			}
			#price{
				width: 15%;
				float: left;
				padding-top: 40px;
				padding-bottom:40px;
				padding-left: 40px;
				color: #D03C26;
				border: #F0F0F0 1px solid;
				border-top: 0px;
				border-bottom: 0px;
			}
			#count{
				width: 15%;
				float: left;
				padding-top: 40px;
				padding-left: 40px;
				border: #F0F0F0 1px solid;
				border-top: 0px;
				border-bottom: 0px;
			}
			#opt{
				float: left;
				padding-top: 40px;
				padding-left: 40px;
				border-top: 0px;
				border-bottom: 0px;
				color: #495FAE;
			}
			#pic{
				float: left;
				border: #D8D2CB 1px solid;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="logo"><a border="1"><img src="img/logo.gif" /></a></div>
				<div id="tab">
					<div style="float: left;background: #EE7700;"><a style="color:#F0F8FF;">首页</a></div>
			        <div style="float: left;"><a >图书</a></div> 
			        <div style="float: left;"><a>百货</a> </div>
			        <div style="float: left;"><a>品牌</a> </div>
			        <div style="float: left;"><a>促销</a></div>
				</div>
				<div id="operator">
					<span style="background: url(img/bg.png)0px -68px;">&nbsp;&nbsp;&nbsp;</span>
					<a href="shopping.html">购物车</a>
					<a href="login.html">登录</a>
					<a href="resiger.html">注册</a>
					<a href="guestbook.html">留言</a>
				</div>
			</div>
			<div id="mune">
				<a style="margin-left: 70px;">音乐</a>
				<a>影视</a>
				<a>少儿</a>
				<a>动漫</a>
				<a>小说</a>
				<a>外语</a>
				<a>数码照相机</a>
				<a>笔记本</a>
				<a>羽绒服</a>
				<a>秋冬靴</a>
				<a>运动鞋</a>
				<a>美容护肤</a>
				<a>家纺用品</a>
				<a>婴幼奶粉</a>
				<a>饰品</a>
				<a>Investor Redations</a>
			</div>
			<div id="location">您现在的位置是:<a style="color: #95A2D0;">易卖网</a>><a >购物车</a></div>
			<div id="context">
				<div style="width: 100%;">
					<div id="con1"><a style="padding-left: 20%;">商品名称</a>
						<a style="margin-left: 38%;">商品价格</a>
						<a style="margin-left: 10%;">购买数量</a>
						<a  style="margin-left: 6%;">操作</a>
					</div>
					<div id="con2">
						<div id="name">
							<div id="pic">
								<img src="img/0_tiny.gif" />
							</div>
							<div style="padding-top: 40px;">
								<a style="color: #495FAE;">铁三角 Audio-Technica ATH-EQ300M-SV 银色 挂耳式耳机</a>
							</div>
						</div>
						<div id="price">&yen;99.00</div>
						<div id="count"><input size="1" value="1"><a style="border: #D8D2CB 1px solid;margin-left: 2px;">修改</a></div>
						<div id="opt"><a >删除</a></div>
					</div>
				</div>
				
				<div id="con3"></div>
				<div id="con4">Cookie中记录的购物车商品ID:null，可以在动态页面中进行读取</div>
			</div>
			<div id="mune2">
				<a style="margin-left: 35%;">Copyright &copy; 2016 东方睿智 All Rights Reserved.京ICP证1000001号</a>
			</div>
		</div>
	
	</body>
</html>
